import { BlogList } from "../entitys/store";

export const mockList: BlogList = {
  list: [
    {
      title: "vue2 的创建项目",
      desc: "我们推荐在你的浏览器上安装。它允许你在一个更友好的界面中审查和调试 Vue 应用。",
      img: "vue",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000001",
    },
    {
      title: "vue生命周期",
      desc: "每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤。",
      img: "lineweek",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000002",
    },
    {
      title: "vue2工程化插件-Router",
      desc: "用 Vue + Vue Router 创建单页应用非常简单,我们需要做的就是将我们的组件映射到路由上",
      img: "router",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000003",
    },
    {
      title: "vue2工程化插件-Axios",
      desc: "Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js",
      img: "axios",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000004",
    },
    {
      title: "vue2工程化插件-Vuex",
      desc: "每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器",
      img: "vuex",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000005",
    },
    {
      title: "vue2工程化插件-Vant",
      desc: "Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。",
      img: "vant",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000006",
    },
    {
      title: "vue2工程化插件-Element",
      desc: "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
      img: "element",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000007",
    },
    {
      title: "vue2工程化插件-Echarts",
      desc: "一个基于 JavaScript 的开源可视化图表库",
      img: "echarts",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000008",
    },
    {
      title: "vue2工程化插件-Pinia",
      desc: "符合直觉的 Vue.js 状态管理库",
      img: "pinia",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000009",
    },
    {
      title: "十 、vue2工程化插件-Ant-Design-Vue",
      desc: "这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。",
      img: "ant",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000010",
    },
    {
      title: "组件中的通信",
      desc: "这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。",
      img: "zujian",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000011",
    },
    {
      title: "插槽的使用",
      desc: "我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。",
      img: "slot",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000012",
    },
    {
      title: "指令的使用",
      desc: "除了 Vue 内置的一系列指令，Vue 还允许你注册自定义的指令",
      img: "directives",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000013",
    },
    {
      title: "Mock的使用",
      desc: "生成随机数据，拦截 Ajax 请求",
      img: "mock",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000014",
    },
    {
      title: "计算属性-Computed",
      desc: "推荐使用计算属性来描述依赖响应式状态的复杂逻辑",
      img: "computed",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000015",
    },
    {
      title: "监听-Watch",
      desc: "我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数",
      img: "watch",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000016",
    },
    {
      title: "数组常用的方法",
      desc: "vue 常用的数组方法",
      img: "array",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000017",
    },
    {
      title: "vue-常用修饰符",
      desc: "vue-事件修饰符、按键修饰符、表单修饰符、自定义修饰符",
      img: "fix",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000018",
    },
    {
      title: "git的使用",
      desc: "支持项目管理、代码托管、版本控制、团队协作、权限管理等功能",
      img: "git",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000019",
    },
    {
      title: "骨架屏的实现",
      desc: "骨架屏是一种优化用户体验的手段，页面内容加载过程中先展示页面的骨架。",
      img: "gjp",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000020",
    },
    {
      title: "switch分支语句",
      desc: "switch 语句用于基于不同的条件来执行不同的动作。",
      img: "switch",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000021",
    },
    {
      title: "element-表单验证",
      desc: "表单验证是前端开发中非常重要的一部分，它可以有效的提高用户体验。",
      img: "validate",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000021",
    },
    {
      title: "冒泡排序的方法",
      desc: "冒泡排序是一种简单的排序算法。",
      img: "sort",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000022",
    },
    {
      title: "盒子水平垂直居中",
      desc: "盒子水平垂直居中的方法有很多种，这里我们介绍几种常用的方法。",
      img: "auto",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000023",
    },
    {
      title: "实现rem适配",
      desc: "rem 是一个相对单位，它是相对于根元素的字体大小来计算的。",
      img: "rem",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000024",
    },
    {
      title: "vue中使用字体图标",
      desc: "字体图标是一种矢量图标，它可以通过 CSS 控制颜色、大小等样式。",
      img: "icon",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000025",
    },
    {
      title: "时间处理",
      desc: "时间处理是前端开发中非常重要的一部分，它可以有效的提高用户体验。",
      img: "time",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000026",
    },
    {
      title: "二维码简单版",
      desc: "二维码是一种矩阵条形码，它可以通过扫描二维码来获取信息。",
      img: "qrcode",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000027",
    },
    {
      title: "border渐变颜色设置",
      desc: "border 渐变颜色设置是一种常用的样式设置方法。",
      img: "border",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000028",
    },
    {
      title: "vue 前端的跨域代理",
      desc: "vue 前端的跨域代理是一种常用的解决跨域问题的方法。",
      img: "proxy",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000029",
    },
    {
      title: "trailWindCSS的使用",
      desc: "trailWindCSS 是一种快速构建页面的 CSS 框架。",
      img: "trailWind",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000030",
    },
    {
      title: "md5加密使用",
      desc: "md5 是一种常用的加密算法，它可以将任意长度的数据转换为固定长度的数据。",
      img: "md5",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000031",
    },
    {
      title: "gz压缩",
      desc: "gz 压缩是一种常用的压缩算法，它可以将文件压缩为更小的文件。",
      img: "gz",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000032",
    },
    {
      title: "base64加密和解密",
      desc: "base64 是一种常用的加密算法，它可以将任意长度的数据转换为固定长度的数据。",
      img: "base64",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000033",
    },
    {
      title: "fetch请求的使用",
      desc: "fetch 是一种常用的请求方法，它可以发送请求并获取响应。",
      img: "fetch",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000034",
    },
    {
      title: "wow.js动画使用",
      desc: "wow.js 是一种常用的动画库，它可以为页面添加动画效果。",
      img: "wow",
      history: 0,
      hot: 0,
      like: 0,
      id: "00000000035",
    },
  ],
};
